<template>
  <div class="bms-container">
    <el-form ref="ruleFormRef" :model="ruleForm" label-width="right" class="conditions-form">
      <el-form-item label="" prop="deviceType">
        <el-select v-model="ruleForm.equipment" placeholder="请选择设备类型">
          <el-option label="全部" value="0"></el-option>
          <el-option label="逆变器" value="inverter"></el-option>
          <el-option label="变压器" value="transformer"></el-option>
          <el-option label="电池组" value="battery"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <div class="itemCont" v-for="(item, index) in bmsData" :key="index">
      <div class="common-title">
        <p class="line"></p>
        <p class="text">{{ item.title }}</p>
      </div>
      <div class="cont">
        <div class="status-row">
          <span class="status-label">工作状态：</span>
          <span class="status-value">{{ item.workStatus }}</span>
        </div>

        <div class="info-container">
          <div class="info-left">
            <div class="info-row">
              <div class="info-item">
                <div class="label">电池堆总电压：</div>
                <div class="value">{{ item.batteryInfo.totalVoltage }}</div>
              </div>
              <div class="info-item">
                <div class="label">可充电量：</div>
                <div class="value">{{ item.batteryInfo.chargableCapacity }}</div>
              </div>
              <div class="info-item">
                <div class="label">累计充电量：</div>
                <div class="value">{{ item.batteryInfo.totalCharged }}</div>
              </div>
            </div>

            <div class="info-row">
              <div class="info-item">
                <div class="label">电池堆总电流：</div>
                <div class="value">{{ item.batteryInfo.totalCurrent }}</div>
              </div>
              <div class="info-item">
                <div class="label">可放电量：</div>
                <div class="value">{{ item.batteryInfo.dischargableCapacity }}</div>
              </div>
              <div class="info-item">
                <div class="label">累计放电量：</div>
                <div class="value">{{ item.batteryInfo.totalDischarged }}</div>
              </div>
            </div>

            <div class="info-row">
              <div class="info-item">
                <div class="label">SOH：</div>
                <div class="value">{{ item.batteryInfo.soh }}</div>
              </div>
              <div class="info-item">
                <div class="label">平均温度：</div>
                <div class="value">{{ item.batteryInfo.avgTemperature }}</div>
              </div>
              <div class="info-item">
                <div class="label">绝缘电阻：</div>
                <div class="value">{{ item.batteryInfo.insulationResistance }}</div>
              </div>
            </div>
          </div>
          <div class="soc-display-box">
            <div class="soc-display" :style="{ width: getSocWidth(item.socValue) }">
              <div class="soc-value">{{ item.socValue }}</div>
              <div class="soc-label">SOC</div>
            </div>
          </div>
        </div>

        <div class="table-container">
          <el-table :data="item.tableData" border>
            <el-table-column prop="cluster" label="簇" />
            <el-table-column prop="voltage" label="簇电压" />
            <el-table-column prop="current" label="簇电流" />
            <el-table-column prop="soc" label="簇SOC" />
            <el-table-column prop="minVoltage" label="单体最低电压" />
            <el-table-column prop="maxTemp" label="单体最高温度" />
            <el-table-column prop="minTemp" label="单体最低温度" />
            <el-table-column prop="headerTemp" label="表头" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { FormInstance } from 'element-plus';

const ruleFormRef = ref<FormInstance>();
const ruleForm = ref({
  equipment: '0'
});

// BMS数据
const bmsData = ref([
  {
    title: '1#BMS-1#BMS堆',
    workStatus: '放电',
    socValue: '71.2%',
    batteryInfo: {
      totalVoltage: '937 V',
      chargableCapacity: '75.039 kWh',
      totalCharged: '37827.7 kWh',
      totalCurrent: '140.1 A',
      dischargableCapacity: '182.961 kWh',
      totalDischarged: '36121.1 kWh',
      soh: '99.6%',
      avgTemperature: '34.6 °C',
      insulationResistance: '10010 KΩ'
    },
    tableData: [
      {
        cluster: '1#BMS-1#BMS堆-1#BMS簇',
        voltage: '937 V',
        current: '140.1 A',
        soc: '71.2%',
        minVoltage: '3.261 V',
        maxTemp: '3.245 V',
        minTemp: '37 °C',
        headerTemp: '33 °C'
      }
    ]
  },
  {
    title: '2#BMS-2#BMS堆',
    workStatus: '充电',
    socValue: '65.8%',
    batteryInfo: {
      totalVoltage: '945 V',
      chargableCapacity: '85.127 kWh',
      totalCharged: '42156.3 kWh',
      totalCurrent: '125.6 A',
      dischargableCapacity: '165.234 kWh',
      totalDischarged: '40523.7 kWh',
      soh: '98.2%',
      avgTemperature: '33.2 °C',
      insulationResistance: '9850 KΩ'
    },
    tableData: [
      {
        cluster: '2#BMS-2#BMS堆-1#BMS簇',
        voltage: '945 V',
        current: '125.6 A',
        soc: '65.8%',
        minVoltage: '3.258 V',
        maxTemp: '3.240 V',
        minTemp: '35 °C',
        headerTemp: '31 °C'
      }
    ]
  },
  {
    title: '3#BMS-3#BMS堆',
    workStatus: '待机',
    socValue: '83.5%',
    batteryInfo: {
      totalVoltage: '956 V',
      chargableCapacity: '42.158 kWh',
      totalCharged: '36752.4 kWh',
      totalCurrent: '0.0 A',
      dischargableCapacity: '214.753 kWh',
      totalDischarged: '35421.8 kWh',
      soh: '100.0%',
      avgTemperature: '30.1 °C',
      insulationResistance: '10520 KΩ'
    },
    tableData: [
      {
        cluster: '3#BMS-3#BMS堆-1#BMS簇',
        voltage: '956 V',
        current: '0.0 A',
        soc: '83.5%',
        minVoltage: '3.275 V',
        maxTemp: '3.268 V',
        minTemp: '32 °C',
        headerTemp: '29 °C'
      }
    ]
  }
]);

// 根据SOC值计算显示宽度
const getSocWidth = (socValue: string) => {
  // 从字符串中提取数字部分
  const numericValue = parseFloat(socValue.replace('%', ''));
  // 确保值在0-100之间
  const validValue = Math.min(Math.max(numericValue, 0), 100);
  // 返回百分比宽度
  return `${validValue}%`;
};
</script>

<style lang="scss" scoped>
.bms-container {
  .conditions-form {
    box-shadow: 0px 4px 8px 0px #00000026;
    margin-bottom: 0.08rem;

    .el-form-item:last-child {
      margin-left: 0;
    }
  }

  .itemCont {
    padding-top: 0.08rem;
    padding-bottom: 0.2rem;
    background: #fff;
    padding: 0.08rem 0.24rem 0.24rem;
  }

  .cont {
    border: 1px solid #E5E6EA;
    border-radius: 0.04rem;
    margin: 0.08rem 0;
    padding-bottom: 0.2rem;

    .status-row {
      background-color: #f0f5ff;
      padding: 0.1rem 0.15rem;

      .status-label {
        font-weight: 500;
      }
    }

    .info-container {
      display: flex;
      justify-content: space-between;
      padding: 0.12rem 0.4rem;
      align-items: center;

      .info-left {
        flex: 1;

        .info-row {
          display: flex;
          height: 0.36rem;
          line-height: 0.36rem;

          .info-item {
            flex: 1;
            display: flex;

            .label {
              color: #666;
            }

            .value {
              font-weight: bold;
            }
          }
        }
      }

      .soc-display-box {
        width: 3.95rem;
        height: 0.88rem;
        border: 2px solid #43B244B2;
        border-radius: 0.12rem;
        display: flex;
        justify-content: start;
        align-items: center;
        padding: 0.06rem;
        background-color: #f5f5f5; // 背景色以便于显示空白部分

        .soc-display {
          height: 100%;
          background: linear-gradient(270deg, #BBEA58 0%, #66C93E 27.61%, #2CB32D 100%);
          border-radius: 0.12rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          color: white;
          min-width: 1.2rem; // 确保即使SOC很低也能显示文字

          .soc-value {
            font-size: 0.32rem;
            font-weight: bold;
            line-height: 1;
          }

          .soc-label {
            font-size: 0.14rem;
            font-weight: bold;
          }
        }
      }
    }

    .table-container {
      padding: 0 0.4rem;
      :deep(.el-table th) {
        background: #F2F3F5;

      }
    }
  }
}
</style>
